<template>
  <view class="panel-box" v-if="showData.type === 'commodity'">
    <image :src="showData.imageUrl" mode="widthFix"></image>
    <view class="info-box">
      <view class="product-des">{{ showData.productDes }}</view>
      <view class="title">{{ showData.title }}</view>
      <view class="price-box">
        <text class="rmb">¥</text>
        <text class="price">{{ showData.price }}</text>
        <text class="price-des">新人价</text>
        <text class="payment-amount">{{ showData.paymentAmount }}人付款</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "panel002",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 1,
          title:
            "New Balance NB 530 单层 春季 经典复古 网布织物人造革减震耐磨透气 低帮跑步鞋 男女同款 白银色 D宽",
          price: "419",
          productDes: "TOP 入选的雾榜单",
          imageUrl: "/static/dataImage/dewu/001.jpg",
          NewcomerJoined: true,
          logoUrl: "/static/dataImage/dewu/logo004.webp",
          paymentAmount: "137",
          type: "commodity",
        };
      },
    },
  },
  components: {},
  setup(props) {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.panel-box {
  background: #fff;
  image {
    width: 100%;
    display: block;
  }
  .info-box {
    padding: 10rpx 20rpx;
    position: relative;
    .product-des {
      position: absolute;
      font-size: 20rpx;
      color: #999;
      left: 20rpx;
      top: -30rpx;
    }
    .title {
      font-size: 28rpx;
      color: #000;
      // 显示2行多余省略号
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-weight: 400;
    }
    .status {
      font-size: 22rpx;
      color: #999;
      margin: 10rpx 0;
    }
    .logo-box {
      width: 70rpx;
      image {
        width: 100%;
      }
    }
    .price-box {
      // 文字横向底部对齐
      display: flex;
      align-items: center;
      vertical-align: bottom;
      margin-top: 10rpx;
      .rmb {
        font-size: 22rpx;
        font-weight: 700;
        margin-right: 10rpx;
        color: #000;
        margin-top: 5rpx;
      }
      .price {
        font-size: 28rpx;
        font-weight: 700;
      }
      .price-des {
        font-size: 20rpx;
        margin-left: 10rpx;
        color: red;
        margin-top: 5rpx;
      }
      .payment-amount {
        margin-left: auto;
        color: #777;
        font-size: 20rpx;
        margin-top: 5rpx;
      }
    }
  }
}
</style>
